<template>
	<div class="container">
		<div class="containerBackground">
			<AppHeader :title="title" :banAnimate="true" backgroundColor="" titleColor="#ffffff">
				<template #left>
					<!-- 	<img @click="onClickLeft" src="@/assets/phoneticPractice/icon-arrow-left-white.png" width="9"
						height="17" /> -->
					<van-icon name="cross" :size="17" @click="onClickLeft"/>
				</template>
			</AppHeader>
			<div style="height: 74px;"></div>
			<div class="containerBackground-number">{{Math.floor(taskObj.score)}}</div>
			<div class="containerBackground-better">You can do better</div>
			<div class="containerBackground-submitTask">
				<div>作业提交成功</div>
				<img src="@/assets/phoneticPractice/完成@3x.png" />
			</div>
		</div>
		<div class="containerTask">
			<div class="containerTask-context">
				<div>单词个数</div>
				<div>{{taskObj.question_num}}</div>
			</div>
			<div class="containerTask-context">
				<div>跟读用时</div>
				<div>{{taskObj.use_time}}</div>
			</div>
			<div class="containerTask-context" @click="goWrongQuestion">
				<div>查看详情</div>
				<div>
					<img src="@/assets/phoneticPractice/跳转箭头@3x.png" />
				</div>
			</div>
			<div class="containerTask-button" @click="completeTask">完成</div>
		</div>
	</div>

</template>

<script setup>
	import AppHeader from '@/components/AppHeader.vue'
	import {
		onMounted,
		reactive,
		toRefs
	} from 'vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const title = route.query.title
	let state = reactive({
		taskObj: {}
	})

	onMounted(() => {
		let phoneticPractice = localStorage.getItem('phoneticPracticeWord')
		state.taskObj = JSON.parse(phoneticPractice)
	})
	const onClickLeft = () => {
		// router.go(-1)
		localStorage.removeItem('phoneticPracticeWord')
		router.go(-4)
	}
	//完成任务
	const completeTask = () => {
		localStorage.removeItem('phoneticPracticeWord')
		router.go(-4)
	}

	const goWrongQuestion = () => {
		router.push({
			path: '/phoneticPractice/wrongQuestion',
			query: {
				title: title,
			}
		})
	}

	const {
		taskObj
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.container {
		background: #F5F5F5;
		height: 100%;

		.containerBackground {
			color: #FFFFFF;
			background: url('@/assets/phoneticPractice/背景@3x.png');
			background-size: contain;
			height: 375px;
			text-align: center;

			.containerBackground-number {
				font-size: 66px;
				// margin-top: 64px;
			}

			.containerBackground-better {
				margin-top: 10px;
				font-size: 18px;
			}

			.containerBackground-submitTask {
				margin-top: 30px;
				font-size: 18px;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
					margin-left: 10px;
				}
			}
		}

		.containerTask {
			position: relative;
			padding: 0 10px 15px 10px;
			height: 239px;
			color: #333333;
			font-size: 16px;
			line-height: 53px;
			border-radius: 15px;
			background: #ffffff;
			position: relative;
			bottom: 55px;
			margin: 0 10px;

			.containerTask-context {
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				justify-content: space-between;

				img {
					width: 7px;
					height: 12px;
				}
			}

			.containerTask-button {
				width: 300px;
				height: 45px;
				line-height: 45px;
				background: linear-gradient(to left, #29F19C, #02A1F9);
				position: absolute;
				left: 27.5px;
				bottom: 15px;
				text-align: center;
				border-radius: 22.5px;
				font-size: 18px;
				color: #FFFFFF;
			}
		}
	}
</style>